The Web

Click Here For Video Review

Are you ready to code your own website!?
Websites are a lot of fun to create and have become very necessary.

People may not think you're a real company if you don't have one!

This animation was coded with simple HTML
using a marquee tag, you'll learn how soon!
Every company has a website and is continually wanting to make it better.

Would you ever want to:

Let's make sure you understand a few terms, before we get started into HTML.

Click on the text / Image below to see a quick explanation!

What is a Browser?

What is a Text Editor?

What is a URL?


A BROWSER reads HTML code (and other coding languages too) then displays it for all to see!

Examples of browsers are: Chrome, Firefox, Safari, Edge, Internet Explorer (Don't use this one!) to name a few.

A TEXT EDITOR is where YOU will write your HTML code and save it on your computer!

You can think of a Text Editor is like Microsoft Word, but for programming.

Examples of Text Editors are: Sublime, Notepad++, Gedit, Atom.

In a coming lesson you'll download a text edit to use and start coding a website!

A URL tells the browser where your HTML file (or website) is located!

If it's live on the Internet the URL will have http(s) at the beginning, like this:

http://website.com

If it's a file on your computer the URL will look like this:

file:///users/me/Desktop/Web/index.html



When this slide makes sense, go on to the next slide!



HTML

Click Here For Video Review

Read the left column first, then take a look at the example on the right!

Below is what HTML looks like!

A browser interprets that code above like this!
HTML is written as 'tags' that look like this:
<html>

HTML tags come in pairs, like this:
<html> </html>

There is slight difference between two HTML tags though.

You have opening tags: <html>
And you have closing tags: </html>

Notice the difference?

The closing tag always starts with a slash, '/'.
It tells the browser an HTML section has ended.

Every HTML page will have a head section and a body section.

Between the <head> </head> tags you store information like the title. The text between the <title> </title> tags gets displayed inside the browser tab!

Between the <body> </body> tags you create other HTML tags to mark up text that will be displayed in main body of the website!

Check out the HTML Example to the right!
Notice the different opening and closing tags!

When you understand this topic, go on to the next slide!


HTML Skeleton

Click Here For Video Review

There are a few HTML tags that are used in every web page in the world.
These tags make up the HTML skeleton.

Hover over each tag below for an explanation.
HTML is read top to bottom by browsers. Your first HTML tag will be,
well an <html> tag. This lets the browser know where your HTML starts.
Notice the closing </html> tag comes at the very end.
Between the HTML tags will ALWAYS be a pair of head and body tags. The marquee tag is an example of an HTML tag.
HTML tags are pre-defined, and change the text somehow.
Notice how it's between the body tags.
marquee makes text scroll across the browser.
In the coming lessons you'll be learning many of the commonly used tags! The body tag contains the HTML for your website that shows up in the browser.
You'll be writing HTML between the body tags most of the time.
The body tag is considered a sibling to the head tag, because they share the same parent tag of <html>. Text between title tags gets displayed in the browser tab.
Title tags always go between the head tags.
Tags nested inside other tags are called their child.
The title tag is a child of the head tag. The head tags ALWAYS come right after html.
This is where you link to other documents and give your site a title.
Only type code between head tags when specific instructions tell you to.
<html>
<head>
<title>
My Website
</title>
</head>
<body>
<marquee>
Hello World!
</marquee>
</body>
</html>

Fix the HTML

Below is a Text Editor (Left Side) and an HTML Display Window (Right Side)

Type in the missing HTML tags into the text editor on the left.
Hint: The missing tags should go on line 5 & 11!

<html> <head> <title> Hello </title> </head> <body> <marquee> Hello World! </marquee> </body> </html> <html> <head> <title> Hello </head> <body> <marquee> Hello World! </marquee> </html>

You are almost ready to start writing your own HTML, in the next lesson you'll learn about text editors.

They allow you to easily write HTML tags then look at the results in a browser, like Chrome or Firefox.

Move on to the Next Lesson!